<template>
    <div>
        <h3>SKU 选择器</h3>
        <div v-for="(option, index) in skuOptions" :key="index">
            <label>{{ option.name }}</label>
            <div>
                <el-button v-for="item in option.items" :key="item.value"
                    :type="selectedOptions[index] === item.value ? 'primary' : 'default'"
                    @click="selectOption(index, item.value)">
                    {{ item.label }}
                </el-button>
            </div>
        </div>
        <div>
            <h4>已选择的 SKU:</h4>
            <p>{{ selectedSku }}</p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue';

// 传入的数据格式示例
// const skuData = [
//     {
//         name: '颜色',
//         items: [
//             { label: '红色', value: 'red' },
//             { label: '蓝色', value: 'blue' }
//         ]
//     },
//     {
//         name: '尺寸',
//         items: [
//             { label: 'S', value: 's' },
//             { label: 'M', value: 'm' }
//         ]
//     },
//     {
//         name: '材质',
//         items: [
//             { label: '棉', value: 'cotton' },
//             { label: '聚酯', value: 'polyester' }
//         ]
//     }
// ];

interface SkuOption {
    name: string;
    items: { label: string; value: string }[];
}

const props = defineProps<{
    skuOptions: SkuOption[];
}>();

const selectedOptions = ref<string[]>(Array(props.skuOptions.length).fill(''));
const selectedSku = computed(() => {
    return selectedOptions.value.join(' - ');
});

watch(selectedOptions, (newValues) => {
    console.log('Selected SKU:', newValues.join(' - '));
});

const selectOption = (index: number, value: string) => {
    selectedOptions.value[index] = value;
};
</script>

<style lang="scss" scoped></style>